<template>
  <KView class="shop-cart-footer">
    <KView class="shop-cart-footer-check">
      <sys-checkbox v-model="shopCart.checked" :disabled="shopCart.checked===undefined" @change="checkChange">
        <span>全选</span>
      </sys-checkbox>
    </KView>
    <KView class="shop-cart-footer-info">
      <KView class="shop-cart-footer-count">已选{{statData.count}}件</KView>
      <KView>合计:</KView>
      <KView class="shop-cart-footer-price ellipsis">
        <span class="price-unit">¥</span>
        <span class="price-num">{{statData.totalPrice}}</span>
      </KView>
    </KView>
    <KView class="flex-central shop-cart-footer-btn" @click="toBalance">
      <span>结算</span>
    </KView>
  </KView>
</template>

<script>
  import SysCheckbox from 'common/sysCheckbox';

  export default {
    props: {
      shopCart: {
        type: Object,
        required: true
      }
    },

    computed: {
      statData() {
        let shopCart = this.shopCart;
        return shopCart.getStatData();
      }
    },

    data() {
      return {};
    },

    methods: {
      checkChange() {
        this.shopCart.checkChange();
      },

      toBalance(){
        let statData = this.statData;
        if (statData.count === 0) {
          this.$api.showToast({
            title: '请选择需要结算的商品',
            icon: 'none'
          });
          return;
        }

        this.$emit('cart-balance');
      }
    },

    components: {
      SysCheckbox
    }
  };

</script>

<style lang="scss">
  .shop-cart-footer {
    height: 100%;
    display: flex;

    .shop-cart-footer-check {
      width: formatPx(110);
      font-size: formatPx(26);
      color: #999999;
    }

    .shop-cart-footer-info {
      flex: 1;
      margin-right: formatPx(16);
      margin-left: formatPx(10);
      color: #999999;
      font-size: formatPx(26);
      display: flex;

      >div {
        line-height: formatPx(80);
      }

      .shop-cart-footer-count {
        margin-right: formatPx(10);
      }

      .shop-cart-footer-price {
        flex: 1;
        color: #FF641F;
        min-width: 0;
        line-height: formatPx(80);
        margin-left: formatPx(10);

        .price-unit {
          font-size: formatPx(30);
          margin-right: formatPx(5);
        }

        .price-num {
          font-size: formatPx(38);
        }
      }
    }

    .shop-cart-footer-btn {
      width: formatPx(190);
      font-size: formatPx(34);
      height: 100%;
      border-radius: formatPx(40);
      background: #59c264;
      color: #ffffff;
    }
  }

</style>
